<template>
    <div v-loading.lock="fullscreenLoading">
        <centerHeader :title="header"></centerHeader>
        <div class="details" v-show="!fullscreenLoading">
            <div class="dt-left">
                <img v-if="img" :src="$utils.getimgurl(img)" alt="">
                <h1>{{novel}}</h1>
                <p>字数: {{words}}</p>
                <p>{{descr}}</p>
            </div>
            <div class="dt-right" v-show="!fullscreenLoading">
                <ul v-for="(item, index) in arr" :key="index">
                    <li>
                        <span :class="item.sort == default_top_chapter_num?'stick':''">{{item.sort}}</span>
                        <div>
                            <span @click="rendchapter(item.contentid.content, item.chapter, item.sort)">{{item.chapter}}</span>
                            <span>免费</span>
                            <span>{{item.update_time | timestampToTime}}</span>
                            <span v-if="item.sort == text_section">推荐阅读原文章节</span>
                            <p v-if="item.sort == default_sub_chapter_num"><span>推荐关注章节</span><i class="el-icon-circle-check"></i><span>关注</span></p>
                        </div>
                    </li>
                    <li>
                        <el-tooltip class="item" effect="dark" content="原文链接为当前章节" placement="top" :open-delay="500">
                            <div @click="promote(item.sort, item.chapter)">
                                <span>获取推广链接</span>
                            </div>
                        </el-tooltip>
                        <div class="popover">
                            <el-popover placement="bottom-end" width="141" trigger="click">
                                <p class="pop1" @click="settop(item.sort)">设为置顶章节</p>
                                <p class="pop2" @click="setsub(item.sort)">设为关注章节</p>
                                <div class="pop3" slot="reference">
                                    <span>更多</span>
                                </div>
                            </el-popover>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <el-dialog title="生成推广链接" :visible.sync="dialogTableVisible" width="645px" top="50px">
            <promoteLinks @dialog="dialog1" :chapter="chapter" :img="img" :attention="default_sub_chapter_num" :top="default_top_chapter_num" :read="change_text_section"></promoteLinks>
        </el-dialog>
        <el-dialog title="原文链接" :visible.sync="dialogTableVisible1" width="645px">
            <div class="original">
                <p>原文链接：<span>{{link}}</span></p>
                <span v-clipboard:copy="link" v-clipboard:success="onCopy"><i></i>复制链接</span>
                <p><span class="el-icon-info"></span>请务必使用上方链接作为文案的原文链接，不要使用微信中点开后手工复制的链接</p>
            </div>
        </el-dialog>
        <el-dialog :title="chapter" :visible.sync="dialogTableVisible2" width="750px" top="28px">
            <chapterText @changeChapter="changeChapter" :text="content" :present="change_text_section" :lengthed="arr.length"></chapterText>
        </el-dialog>
    </div>
</template>

<script>
import booklist from "./booklist";
import centerHeader from "../../../components/center-header";
import chapterText from "./chapterText";
import promoteLinks from "./promote-links";

export default {
  data() {
    return {
      header: [
        { title: "小说列表", path: "/home/novellist/0/0'" },
        { title: "", path: "" }
      ],
      dialogTableVisible: false,
      dialogTableVisible1: false,
      dialogTableVisible2: false,
      fullscreenLoading: true,
      novel: "",
      img: "",
      words: "",
      descr: "",
      arr: [],
      default_sub_chapter_num: "",
      default_top_chapter_num: "",
      text_section: "",
      change_text_section: "",
      chapter: "",
      content: "",
      link: "",
      url:"http://d"
    };
  },
  methods: {
    settop(sort) {
      this.default_top_chapter_num = sort;
      this.setFollow();
    },
    setsub(sort) {
      this.default_sub_chapter_num = sort;
      this.setFollow();
    },
    setFollow() {
      let that = this;
      that.axios
        .post("/cp/v1/book/getFollow", {
          book_id: that.$route.params.book_id,
          sort: that.default_sub_chapter_num,
          top: that.default_top_chapter_num
        })
        .then(res => {
          if (res.data.code == 200) {
            console.log("成功");
          }
        })
        .catch(function(error) {
          error = error + "";
          if (error.search("timeout") !== -1) {
            //超时判断
            that.loading_read = true;
          }
        });
    },
    promote(sort, chapter) {
      this.change_text_section = sort;
      this.chapter = chapter;
      this.dialogTableVisible = true;
    },
    dialog1(id) {
      this.link = this.url + JSON.parse(localStorage.userInfo).user_id + ".131452.com/#/setcookies/" + id;
      this.dialogTableVisible = false;
      setTimeout(() => {
        this.dialogTableVisible1 = true;
      }, 500);
    },
    rendchapter(content, chapter, sort) {
      // console.log(content)
      this.change_text_section = sort;
      this.content = content;
      this.chapter = chapter;
      this.dialogTableVisible2 = true;
    },
    changeChapter(sort, type) {
      let that = this;
      that.arr.forEach(function(value, index, arr) {
        if (value.sort == sort) {
          that.content = value.contentid.content;
          that.chapter = value.chapter;
        }
      });
    },
    //点击复制
    onCopy(e){
      if (e.text) {
        this.$message.success("复制成功!");
      }
    }
  },
  created() {
    console.log(JSON.parse(localStorage.userInfo));
    //   var a = '<li>content</li> <li>content</li> <li>content</li> <li>content</li>';
    //   var c = a.replace(/^(\<\/li\>)(\s+)(\<li\>)$/,function (match,$1,$2,$3) {
    //       return $2 = ","
    //   })
    //   console.log(c);
    //   this.header[1].title = this.nover;
    let that = this;
    that.axios
      .post("/cp/v1/book/getIndex", {
        book_id: this.$route.params.book_id
      })
      .then(res => {
        if (res.data.code == 200) {
          console.log(res);
          that.novel = res.data.data.novel;
          that.header[1].title = res.data.data.novel;
          that.img = res.data.data.img;
          that.words = res.data.data.words;
          that.descr = res.data.data.descr;
          that.default_sub_chapter_num = res.data.data.default_sub_chapter_num;
          that.default_top_chapter_num = res.data.data.default_top_chapter_num;
          that.text_section = res.data.data.text_section;
          that.arr = res.data.data.io;
          that.fullscreenLoading = false;
        }
      })
      .catch(function(error) {
        error = error + "";
        if (error.search("timeout") !== -1) {
          //超时判断
          that.loading_read = true;
        }
      });
  },
  components: {
    centerHeader,
    promoteLinks,
    chapterText
  }
};
</script>
<style scoped>
.details {
  padding: 29px 33px 40px 32px;
  /* min-width: 824px; */
  position: relative;
  display: flex;
}
.dt-left {
  position: relative;
  display: inline-block;
  /* width: 280px; */
  width: 21.604938%;
  margin-right: 50px;
}
.dt-left img {
  width: 225px;
  height: 300px;
  margin-bottom: 19px;
}
.dt-left h1 {
  font-size: 16px;
  font-weight: normal;
  color: #000;
  margin-bottom: 15px;
}
.dt-left p:nth-child(3) {
  font-size: 12px;
  color: #666;
  margin-bottom: 12px;
}
.dt-left p:nth-child(4) {
  min-width: 225px;
  font-size: 14px;
  color: #666;
  line-height: 2em;
  text-align: justify;
}
.dt-right {
  /* position: absolute;
  left: 342px;
  top: 29px;
  right: 33px; */
  width: 73.901235%;
  display: inline-block;
  min-width: 810px;
  border: 1px solid #ccc;
  /* margin-bottom: 50px; */
  background-color: #fff;
}
.dt-right ul {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  font-family: MicrosoftYaHei;
}
.dt-right ul:nth-child(2n + 2) {
  background-color: #f1f9eb;
}
.dt-right ul:last-child {
  border-bottom: none;
}
.dt-right ul li:nth-child(1) {
  display: flex;
}
.dt-right ul li:nth-child(1) > span {
  display: inline-block;
  width: 42px;
  height: 100%;
  border-right: 1px solid #ccc;
  color: #333;
}
.stick {
  background: url(../../../public/img/stick.png) no-repeat;
  background-size: 50%;
}
.dt-right ul li:nth-child(1) > div {
  padding-left: 20px;
  display: flex;
  align-items: center;
}
.dt-right ul li:nth-child(1) > div > span:nth-child(1) {
  color: #36a4ff;
  margin-right: 10px;
}
.dt-right ul li:nth-child(1) > div > span:nth-child(1):hover {
  cursor: pointer;
  text-decoration: underline;
}
.dt-right ul li:nth-child(1) > div span:nth-child(2) {
  display: inline-block;
  width: 30px;
  height: 20px;
  background-color: #ff0000;
  color: #fff;
  font-size: 12px;
  margin-right: 10px;
  line-height: 20px;
  border-radius: 4px;
}
.dt-right ul li:nth-child(1) > div span:nth-child(3) {
  color: #999999;
  font-size: 12px;
  margin-right: 8px;
}
.dt-right ul li:nth-child(1) > div span:nth-child(4) {
  padding: 0 4px;
  height: 16px;
  background-color: #ff9933;
  font-size: 12px;
  color: #fff;
  line-height: 16px;
  margin-right: 8px;
}
.dt-right ul li:nth-child(1) > div p span:first-child {
  padding: 0 4px;
  height: 16px;
  background-color: #ff9933;
  font-size: 12px;
  color: #fff;
  line-height: 16px;
  margin-right: 3px;
}
.dt-right ul li:nth-child(1) > div p i {
  color: #36a4ff;
  margin-right: 3px;
}
.dt-right ul li:nth-child(1) > div p span:last-child {
  color: #36a4ff;
}
.dt-right ul li:nth-child(1) > div span:nth-child(4) span {
  font-size: 12px;
}
.dt-right ul li:nth-child(2) {
  display: flex;
  /* width: 358px; */
}
.dt-right ul li:nth-child(2) > div:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  color: #333;
}
.dt-right ul li:nth-child(2) > div:first-child::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 17px;
  margin-right: 13px;
  background-image: url(../../../public/img/6.png);
  background-size: cover;
}
.dt-right ul li:nth-child(2) > div:first-child:hover {
  cursor: pointer;
}
.dt-right ul li:nth-child(2) > div:first-child:hover::before {
  background-image: url(../../../public/img/66.png);
}
.dt-right ul li:nth-child(2) > div:first-child:hover span {
  color: #36a4ff;
  text-decoration: underline;
}
.dt-right ul li:nth-child(2) .popover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 75px;
}
.dt-right ul li:nth-child(2) .popover .pop3 {
  width: 65px;
  height: 15px;
  line-height: 15px;
  border-radius: 4px;
}
.dt-right ul li:nth-child(2) .popover .pop3:hover {
  cursor: pointer;
}
.dt-right ul li:nth-child(2) .popover .pop3 span {
  margin-right: 7px;
  color: #333;
}
.dt-right ul li:nth-child(2) .popover .pop3::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 7px;
  background: url(../../../public/img/san.png) no-repeat;
  background-size: cover;
}
/* .dt-right ul li:nth-child(2) .popover .pop3.selected {
  background-color: #36a4ff;
}
.dt-right ul li:nth-child(2) .popover .pop3.selected span {
  color: #fff;
}
.dt-right ul li:nth-child(2) .popover .pop3.selected::after {
  background: url(../../../public/img/san-1.png) no-repeat;
  background-size: cover;
} */
.pop1 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}
.pop1::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url(../../../public/img/fd-1.png);
  margin-right: 4px;
}
.pop1:hover {
  background-color: #f4f8fb;
  color: #36a4ff;
  cursor: pointer;
}
.pop1:hover::before {
  background-image: url(../../../public/img/fd-11.png);
}
.pop2 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}
.pop2::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url(../../../public/img/fd-2.png);
  margin-right: 4px;
}
.pop2:hover {
  background-color: #f4f8fb;
  color: #36a4ff;
  cursor: pointer;
}
.pop2:hover::before {
  background-image: url(../../../public/img/fd-22.png);
}
.original {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
}
.original p:first-child {
  height: 33px;
  line-height: 33px;
  margin-bottom: 14px;
}
.original p:first-child span {
  color: #36a4ff;
}
.original p:first-child span:hover {
  text-decoration: underline;
}
.original p:last-child {
  color: #ff0000;
}
.original > span {
  width: 114px;
  height: 33px;
  background: #36a4ff;
  border-radius: 6px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.original > span:hover {
  cursor: pointer;
}
.original > span i {
  display: inline-block;
  width: 16px;
  height: 19px;
  background: url(../../../public/img/copy@3x.png);
  background-size: cover;
  margin-right: 6px;
}
.el-icon-info {
  margin-right: 5px;
}
</style>

